<template>
  <view class="tab_head">
    <text
      @click="barTap(index)"
      v-for="(headItem, index) in headItems"
      :key="index"
      :class="['tab_head-item', activeIndex == index ? 'active' : '']"
    >{{ headItem.text }}</text>
  </view>
</template>

<script>
export default {
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    type: {
      type: String
    },
    headItems: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {},
  methods: {
    barTap(activeIndex) {
      this.$emit("barTap", activeIndex);
    }
  }
};
</script>

<style lang="scss" scoped>
.c_blue {
  color: #377cfd;
}
.tab_head {
  background-color: #fff;
  // display: flex;
  // flex-direction: row;
  // justify-content: space-around;
  font-size: 24upx;
  color: #333;
  padding: 4upx 0;
  box-shadow: 0px 4px 20px 0px rgba(153, 153, 153, 0.15);
  &-item {
    line-height: 50upx;
		margin-left: 50upx;
		padding: 0 10upx 12upx;
    &.active {
      color: #377cfd;
      border-bottom: 4upx solid #377cfd;
    }
  }
}
</style>
